<template>
  <div class="health-box">
    <a-spin :spinning="isHealthSpinning">
      <div class="title-box">
        <div class="title-item-left">
          <span class="text-icon"></span>
          健康信息
        </div>
        <div v-if="tabName == '幽门螺杆菌感染'">
          <a-button
            v-show="!isEditVisible"
            type="primary"
            v-auth="'hp-admin:patientManagement:check'"
            @click="contEditBtn"
            >内容校正</a-button
          >
          <a-button v-show="isEditVisible" style="margin-right: 10px" @click="onCancelBtn"
            >取消</a-button
          >
          <a-button v-show="isEditVisible" type="primary" @click="onSaveBtn">保存</a-button>
        </div>
      </div>
      <div class="health-info">
        <a-form>
          <a-form-item label="现有疾病" name="groupName">
            <div style="display: flex; align-items: flex-start; justify-content: space-between">
              <div>
                <a-tag
                  v-for="(item, index) in state.diagnosisJsonData"
                  style="
                    background-color: #f2f3f5;
                    height: 32px;
                    line-height: 32px;
                    font-size: 14px;
                    margin-bottom: 5px;
                  "
                  :key="index"
                  :closable="isEditVisible"
                  @close="handleDiagnosisClose(index)"
                  >{{ item }}</a-tag
                >
                <template v-if="isEditVisible">
                  <a-input
                    v-if="state.inputVisible"
                    autocomplete="off"
                    ref="inputRef"
                    v-model:value="state.inputValue"
                    type="text"
                    size="small"
                    :style="{ width: '78px' }"
                    @blur="handleInputConfirm"
                    @keyup.enter="handleInputConfirm"
                  />
                  <a-tag
                    v-else
                    style="
                      background: #fff;
                      border: 1px solid #165dff;
                      color: #165dff;
                      height: 32px;
                      line-height: 32px;
                      font-size: 14px;
                    "
                    @click="showInput"
                  >
                    <plus-outlined />
                    添加
                  </a-tag>
                </template>
              </div>
              <a-button
                type="link"
                style="padding-right: 0"
                @click="seeDiagnosls"
                v-if="tabName == '幽门螺杆菌感染'"
              >
                查看原始数据
                <RightOutlined style="margin-left: 3px" />
              </a-button>
            </div>
          </a-form-item>
          <a-form-item name="groupName" v-if="tabName == '幽门螺杆菌感染'">
            <a-checkbox :disabled="!isEditVisible" v-model:checked="state.healdInfoData.hp"
              >幽门螺杆菌感染</a-checkbox
            >
            &nbsp;
            <a-checkbox :disabled="!isEditVisible" v-model:checked="state.healdInfoData.csg"
              >非萎缩性胃炎</a-checkbox
            >
            &nbsp;
            <a-checkbox :disabled="!isEditVisible" v-model:checked="state.healdInfoData.cag"
              >萎缩性胃炎</a-checkbox
            >
            &nbsp;
            <a-checkbox :disabled="!isEditVisible" v-model:checked="state.healdInfoData.gu"
              >胃溃疡</a-checkbox
            >
            &nbsp;
          </a-form-item>
          <a-divider style="margin: 16px 0"></a-divider>
          <a-form-item label="胃癌高风险人群" name="groupName" v-if="tabName == '幽门螺杆菌感染'">
            <a-radio-group
              v-model:value="state.healdInfoData.isGcHighRisk"
              :disabled="!isEditVisible"
            >
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="胃癌高风险因素评分"
            name="groupName"
            v-if="tabName == '幽门螺杆菌感染'"
          >
            <div style="display: flex; flex-direction: row; align-items: center">
              <span v-if="state.scoreNoData.length < 3">≥</span>
              &nbsp;
              <a-input
                :disabled="true"
                v-model:value="state.healdInfoData.gcScore"
                placeholder=""
                style="width: 80px"
              />
              <span style="margin: 0 10px 0 5px">分</span>
              <QuestionCircleOutlined
                @click="gcSourceInfo"
                style="cursor: pointer; margin-right: 20px; lin-height: 32px"
              />
              <template v-if="isEditVisible">
                年龄
                <a-input-number
                  :disabled="!isEditVisible"
                  v-model:value="state.healdInfoData.age"
                  placeholder=""
                  style="width: 60px; margin: 0 20px 0 12px"
                />
                性别
                <a-radio-group
                  style="margin: 0 20px 0 12px"
                  @change="handleSexChange"
                  v-model:value="state.healdInfoData.sexCode"
                  :disabled="!isEditVisible"
                >
                  <a-radio value="1">男性</a-radio>
                  <a-radio value="2">女性</a-radio>
                </a-radio-group>
                HP感染
                <a-radio-group
                  v-model:value="state.healdInfoData.hp"
                  :disabled="!isEditVisible"
                  style="margin: 0 20px 0 12px"
                >
                  <a-radio :value="true">有</a-radio>
                  <a-radio :value="false">无</a-radio>
                </a-radio-group>
                PGR
                <a-input-number
                  :disabled="!isEditVisible"
                  v-model:value="state.healdInfoData.pgr"
                  placeholder=""
                  style="width: 60px; margin: 0 20px 0 12px"
                />
                G-17(pmol/L)
                <a-input-number
                  :disabled="!isEditVisible"
                  v-model:value="state.healdInfoData.g17"
                  placeholder=""
                  style="width: 60px; margin: 0 20px 0 12px"
                />
              </template>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="title-item" v-if="tabName == '幽门螺杆菌感染'">重要检验检查</div>
      <a-table
        v-if="tabName == '幽门螺杆菌感染'"
        size="small"
        :pagination="false"
        :columns="state.examColums"
        :dataSource="state.examTableData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'examItemName'">
            {{ record.examItemName ? record.examItemName : '无' }}
          </template>
          <template v-if="column.dataIndex === 'examTime'">
            <a-date-picker
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              v-if="record.isEdit"
              show-time
              v-model:value="record.timne"
            ></a-date-picker>
            <!-- <a-input notrim v-if="record.isEdit" v-model:value="record.examTime" style="margin: -5px 0" /> -->
            <template v-else>
              {{ record.examTime ? record.examTime : '无' }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'quantitative'">
            <a-input
              v-if="record.isEdit"
              v-model:value="record.quantitative"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ record.quantitative ? record.quantitative : '无' }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'qualitative'">
            <a-input
              v-if="record.isEdit"
              v-model:value="record.qualitative"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ record.qualitative ? record.qualitative : '无' }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'reference'">
            <a-input v-if="record.isEdit" v-model:value="record.reference" style="margin: -5px 0" />
            <template v-else>
              {{ record.reference ? record.reference : '无' }}
            </template>
          </template>

          <template v-if="column.dataIndex === 'unit'">
            <a-input v-if="record.isEdit" v-model:value="record.unit" style="margin: -5px 0" />
            <template v-else>
              {{ record.unit ? record.unit : '无' }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'source'">
            <template v-if="record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
              <a-button type="link" @click="examHistoryRes(record)">查看既往结果</a-button>
            </template>
            <template v-else>无</template>
          </template>
        </template>
      </a-table>
      <div class="title-item">既往史</div>
      <a-table
        size="small"
        :pagination="false"
        :columns="state.diseaseHisColums"
        :dataSource="state.diseaseHisTabData"
      >
        <template #bodyCell="{ column, record, text, index }">
          <template v-if="column.dataIndex == 'historyType'">
            <div>
              <a-select
                v-if="record.isEdit"
                style="width: 100%"
                ref="select"
                v-model:value="record.historyType"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option
                  v-for="(itemOption, index) in diseaseTypeData"
                  :key="index"
                  :value="itemOption"
                  >{{ itemOption }}</a-select-option
                >
              </a-select>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'historyName'">
            <div>
              <a-input
                v-if="record.isEdit"
                v-model:value="record.historyName"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'happenTime'">
            <div>
              <a-date-picker
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-if="record.isEdit"
                show-time
                v-model:value="record.timne"
              ></a-date-picker>
              <!-- <a-input v-if="record.isEdit" notrim v-model:value="record.happenTime" style="margin: -5px 0" /> -->
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'source'">
            <template v-if="!record.isEdit && !record.source">无</template>
            <template v-else-if="!record.isEdit && record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
            <template v-else-if="record.isEdit && !record.isAdd">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
              <a-button type="link" v-if="record.isEdit" @click="removeDiseaseHisData(index)"
                >删除数据</a-button
              >
            </template>
            <template v-else-if="record.isAdd">
              <a-button type="link" @click="addDiseaseHis">添加数据</a-button>
            </template>
          </template>
        </template>
      </a-table>

      <div class="title-item">当前用药</div>
      <a-table
        size="small"
        :pagination="false"
        :columns="state.drugColums"
        :dataSource="state.drugJsonData"
      >
        <template #bodyCell="{ column, record, text, index }">
          <template v-if="column.dataIndex == 'orderItemName'">
            <div>
              <a-input
                v-if="record.isEdit"
                v-model:value="record.orderItemName"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'orderBeginTime'">
            <div>
              <a-date-picker
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-if="record.isEdit"
                show-time
                v-model:value="record.timne"
              ></a-date-picker>
              <!-- <a-input notrim v-if="record.isEdit" v-model:value="record.orderBeginTime" style="margin: -5px 0" /> -->
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'diagName'">
            <div>
              <a-input
                v-if="record.isEdit"
                v-model:value="record.diagName"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex == 'source'">
            <template v-if="!record.isEdit && !record.source">无</template>
            <template v-else-if="!record.isEdit && record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
            <template v-else-if="record.isEdit && !record.isAdd">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
              <a-button type="link" v-if="record.isEdit" @click="removeDrugData(index)"
                >删除数据</a-button
              >
            </template>
            <template v-else-if="record.isAdd">
              <a-button type="link" @click="addDrugData">添加数据</a-button>
            </template>
          </template>
        </template>
      </a-table>
    </a-spin>
  </div>

  <!-- 弹出框 -->
  <a-modal
    v-model:open="isExamHisVisible"
    title="查看既往结果"
    :footer="null"
    :maskClosable="false"
    :bodyStyle="{ padding: '0px 0px', minHeight: '400px' }"
    width="1200px"
  >
    <div class="health-box" style="padding: 12px 16px">
      <a-table
        size="small"
        :pagination="false"
        :columns="state.examColums"
        :dataSource="state.examHisTableData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'examItemName'">
            {{ record.examItemName ? record.examItemName : '无' }}
          </template>
          <template v-if="column.dataIndex === 'examTime'">
            {{ record.examTime ? record.examTime : '无' }}
          </template>
          <template v-if="column.dataIndex === 'quantitative'">
            {{ record.quantitative ? record.quantitative : '无' }}
          </template>
          <template v-if="column.dataIndex === 'qualitative'">
            {{ record.qualitative ? record.qualitative : '无' }}
          </template>
          <template v-if="column.dataIndex === 'unit'">
            {{ record.unit ? record.unit : '无' }}
          </template>
          <template v-if="column.dataIndex === 'source'">
            <template v-if="record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
            <template v-else>无</template>
          </template>
        </template>
      </a-table>
    </div>
  </a-modal>

  <!-- 原始数据 -->
  <a-modal
    v-model:open="diagnoslsOpen"
    title="原始数据"
    :bodyStyle="{ padding: '10px 24px', maxHeight: '400px', overflow: 'hidden auto' }"
  >
    <template #footer>
      <a-button @click="diagnoslsOpen = false">关闭</a-button>
    </template>
    <ul>
      <li style="line-height: 35px" v-for="(item, index) in diagnoslsData" :key="index">
        {{ item }}
      </li>
    </ul>
  </a-modal>

  <!-- 数据详情 -->
  <a-modal v-model:open="detialOpen" title="数据详情" :zIndex="10001">
    <template #footer>
      <a-button @click="detialOpen = false">关闭</a-button>
    </template>
    {{ detailOpenData }}
  </a-modal>

  <SourceTable ref="sourceTableRef"></SourceTable>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, h, createVNode } from 'vue'
import {
  RightOutlined,
  QuestionCircleOutlined,
  PlusOutlined,
  ExclamationCircleFilled
} from '@ant-design/icons-vue'
import {
  getHealthInfo,
  getExamHistory,
  updateHealthInfo,
  getDiagnosis
} from '@/api/patientManagement/health-info.ts'
import { message, Modal } from 'ant-design-vue'
import SourceTable from './source.vue'
import dayjs from 'dayjs'
import { parseTime } from '@/utils/tools'

const isEditVisible = ref(false)
const state = reactive({
  inputVisible: false,
  inputValue: '',
  examColums: [
    {
      key: 'examTypeName',
      dataIndex: 'examTypeName',
      align: 'left',
      title: '检验检查类型',
      ellipsis: true,
      width: 110
    },
    {
      key: 'examItemName',
      dataIndex: 'examItemName',
      align: 'left',
      title: '检验检查名称',
      ellipsis: true,
      width: 110
    },
    {
      key: 'examTime',
      dataIndex: 'examTime',
      align: 'left',
      title: '检测时间'
    },
    {
      key: 'quantitative',
      dataIndex: 'quantitative',
      align: 'left',
      title: '定量结果'
    },
    {
      key: 'qualitative',
      dataIndex: 'qualitative',
      align: 'left',
      title: '定性结果'
    },
    {
      key: 'reference',
      dataIndex: 'reference',
      align: 'left',
      title: '参考范围/检查结论'
    },
    {
      key: 'unit',
      dataIndex: 'unit',
      align: 'left',
      title: '单位',
      width: 100
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源',
      width: 130,
      fixed: 'right'
    }
  ],
  diseaseHisColums: [
    {
      key: 'historyType',
      dataIndex: 'historyType',
      align: 'left',
      title: '既往史类型'
    },
    {
      key: 'historyName',
      dataIndex: 'historyName',
      align: 'left',
      title: '既往史名称'
    },
    {
      key: 'happenTime',
      dataIndex: 'happenTime',
      align: 'left',
      title: '既往史发生时间'
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源'
    }
  ],
  diagnosisJsonData: [], // 现有疾病
  examTableData: [], // 检验检查
  healdInfoData: {},
  infoData: {},
  examHisTableData: [], // 既往结果
  diseaseHisTabData: [], // 既往史
  drugColums: [
    {
      key: 'orderItemName',
      dataIndex: 'orderItemName',
      align: 'left',
      title: '药品名称'
    },
    {
      key: 'orderBeginTime',
      dataIndex: 'orderBeginTime',
      align: 'left',
      title: '开始用药时间'
    },
    {
      key: 'diagName',
      dataIndex: 'diagName',
      align: 'left',
      title: '用药目的'
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源'
    }
  ],
  drugJsonData: [], // 用药
  diseaseHisEditTabData: {}, // 既往史编辑
  oldPatientInfo: {},
  scoreNoData: [],
  listId: ''
})

const isHealthSpinning = ref(true)

const patId = ref()
const tabName = ref('')

const diseaseTypeData = ref(['既往疾病、外伤、手术史', '过敏史', '抗生素用药史'])
const plainOptions = ref(['幽门螺杆菌感染', '非萎缩性胃炎', '萎缩性胃炎', '胃溃疡'])

const isExamHisVisible = ref(false)
const diagnoslsOpen = ref(false)
const detialOpen = ref(false)
const detailOpenData = ref({})
const diagnoslsData = ref([])

const contEditBtn = () => {
  isEditVisible.value = true

  state.healdInfoData = {
    ...state.healdInfoData
  }
  //重要检查检验
  state.examTableData.forEach((item) => {
    item.isEdit = true
  })

  // 既往史新增
  state.diseaseHisTabData.forEach((item, index) => {
    item.isEdit = true
  })
  state.diseaseHisTabData.push({
    historyType: '既往疾病、外伤、手术史',
    patId: patId.value,
    historyName: '',
    happenTime: '',
    source: '',
    isEdit: true,
    isAdd: true,
    timne: ''
  })

  state.drugJsonData.forEach((item, index) => {
    item.isEdit = true
  })
  state.drugJsonData.push({
    orderItemName: '',
    patId: patId.value,
    orderBeginTime: '',
    diagName: '',
    source: '',
    isEdit: true,
    isAdd: true,
    timne: ''
  })

  state.drugJsonData = [...state.drugJsonData]
  state.diseaseHisTabData = [...state.diseaseHisTabData]
}

const init = (id, name, listId) => {
  tabName.value = name
  isHealthSpinning.value = true
  isEditVisible.value = false
  diagnoslsOpen.value = false
  diagnoslsData.value = []
  state.healdInfoData = {}
  state.examTableData = []
  state.diagnosisJsonData = []
  state.diseaseHisTabData = []
  state.drugJsonData = []
  patId.value = id
  state.listId = listId

  state.scoreNoData = []
  getHealthInfo({ id: listId })
    .then((res) => {
      isHealthSpinning.value = false
      if (res.data) {
        Object.assign(state.healdInfoData, res.data)
        state.oldPatientInfo = res.data

        if (res.data.age !== 0 && res.data.age) {
          state.scoreNoData.push(res.data.age)
        }
        if (res.data.g17 !== 0 && res.data.g17) {
          state.scoreNoData.push(res.data.g17)
        }
        if (res.data.pgr !== 0 && res.data.pgr) {
          state.scoreNoData.push(res.data.pgr)
        }

        const diagnosisJson = JSON.parse(res.data.diagnosisJson)
        if (diagnosisJson) {
          diagnosisJson.forEach((ele) => {
            state.diagnosisJsonData.push(ele.diagName)
          })
          // for (const key in JSON.parse(diagnosisJson)) {
          //   const value = JSON.parse(diagnosisJson)[key]
          //   state.diagnosisJsonData.push(value)
          // }
        }

        const examJson = res.data.examJson
        if (examJson) {
          state.examTableData = JSON.parse(examJson)
          state.examTableData.forEach((item: any) => {
            item.timne = item.examTime ? dayjs(item.examTime, 'YYYY-MM-DD HH:mm:ss') : ''
            item.isEdit = false
          })
        }

        const diseaseHistory = res.data.diseaseHistory
        if (diseaseHistory) {
          state.diseaseHisTabData = JSON.parse(diseaseHistory)
          state.diseaseHisTabData.forEach((item) => {
            item.timne = item.happenTime ? dayjs(item.happenTime, 'YYYY-MM-DD HH:mm:ss') : ''
            item.isEdit = false
          })
        }

        const drugJson = res.data.drugJson
        if (drugJson) {
          state.drugJsonData = JSON.parse(drugJson)
          state.drugJsonData.forEach((item) => {
            item.timne = item.orderBeginTime
              ? dayjs(item.orderBeginTime, 'YYYY-MM-DD HH:mm:ss')
              : ''
            item.isEdit = false
          })
        }
      }
    })
    .catch(() => {
      isHealthSpinning.value = false
    })
}

// 原始数据
const seeDiagnosls = () => {
  getDiagnosis({ patId: patId.value }).then((res) => {
    if (res.data && res.data.length) {
      diagnoslsOpen.value = true
      diagnoslsData.value = res.data
    } else {
      message.info('暂无原始数据')
    }
  })
}

const handleSexChange = (value) => {
  state.healdInfoData.sexCode = value.target.value
  switch (value.target.value) {
    case '1':
      state.healdInfoData.sexName = '男性'
      break
    case '2':
      state.healdInfoData.sexName = '女性'
      break
  }
}

const handleInputConfirm = () => {
  const inputValue = state.inputValue
  if (inputValue) {
    let tags = state.diagnosisJsonData
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue]
    }

    state.diagnosisJsonData.push(inputValue)
    state.diagnosisJsonData = [...state.diagnosisJsonData]
    state.inputValue = ''
    state.inputVisible = false
  }
}

const handleDiagnosisClose = (index) => {
  state.diagnosisJsonData.splice(index, 1)
  state.diagnosisJsonData = [...state.diagnosisJsonData]
}

const inputRef = ref()
const showInput = () => {
  state.inputVisible = true
  nextTick(() => {
    inputRef.value.focus()
  })
}

//查看既往结果
const examHistoryRes = (data) => {
  state.examHisTableData = []
  isExamHisVisible.value = true

  getExamHistory({ patId: data.patId, itemCode: data.examItemCode }).then((res) => {
    if (res.data) {
      state.examHisTableData = res.data
    }
  })
}

const sourceTableRef = ref()
const gcSourceInfo = () => {
  sourceTableRef.value.init(state.healdInfoData.scoreJson)
}

// 既往史添加数据
const addDiseaseHis = () => {
  if (!state.diseaseHisTabData[state.diseaseHisTabData.length - 1].historyName) {
    return message.warning('既往史名称不能为空')
  }

  state.diseaseHisTabData[state.diseaseHisTabData.length - 1].isAdd = false
  //   delete state.diseaseHisTabData[state.diseaseHisTabData.length - 1]['isAdd']
  state.diseaseHisTabData.push({
    historyType: '既往疾病、外伤、手术史',
    patId: patId.value,
    historyName: '',
    happenTime: '',
    source: '',
    isEdit: true,
    isAdd: true,
    timne: ''
  })
  state.diseaseHisTabData = [...state.diseaseHisTabData]
}

// 删除数据
const removeDiseaseHisData = (index) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除该既往史信息么',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      state.diseaseHisTabData.splice(index, 1)
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

// 添加当前用户数据
const addDrugData = () => {
  if (!state.drugJsonData[state.drugJsonData.length - 1].orderItemName) {
    return message.warning('药品名称不能为空')
  }
  state.drugJsonData[state.drugJsonData.length - 1].isAdd = false
  state.drugJsonData.push({
    orderItemName: '',
    patId: patId.value,
    orderBeginTime: '',
    diagName: '',
    source: '',
    isEdit: true,
    isAdd: true,
    timne: ''
  })
  state.drugJsonData = [...state.drugJsonData]
}

// 删除数据
const removeDrugData = (index) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除该用药信息么',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      state.drugJsonData.splice(index, 1)
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

// 取消
const onCancelBtn = () => {
  init(patId.value, tabName.value, state.listId)
  //   state.diseaseHisTabData.forEach((item, index) => {
  //     item.isEdit = false
  //   })

  //   state.drugJsonData.forEach((item, index) => {
  //     item.isEdit = false
  //   })

  //   // 去除添加的数据
  //   state.diseaseHisTabData = state.diseaseHisTabData.filter((item) => !item.hasOwnProperty('isAdd'))
  //   state.drugJsonData = state.drugJsonData.filter((item) => !item.hasOwnProperty('isAdd'))
}

// 保存
const onSaveBtn = () => {
  isEditVisible.value = false
  state.examTableData.forEach((item, index) => {
    item.examTime = item.timne ? dayjs(item.timne).format('YYYY-MM-DD HH:mm:ss') : null
    delete item['timne']
    delete item['isEdit']
  })
  state.diseaseHisTabData.forEach((item, index) => {
    item.happenTime = item.timne ? dayjs(item.timne).format('YYYY-MM-DD HH:mm:ss') : null
    delete item['isEdit']
    delete item['timne']
  })
  state.drugJsonData.forEach((item, index) => {
    item.orderBeginTime = item.timne ? dayjs(item.timne).format('YYYY-MM-DD HH:mm:ss') : null
    delete item['isEdit']
    delete item['timne']
  })

  // 获取原先的数据
  const initDataDisease = state.diseaseHisTabData.filter((item) => !item.hasOwnProperty('isAdd'))
  const initDataDrug = state.drugJsonData.filter((item) => !item.hasOwnProperty('isAdd'))

  // 获取添加数据 既往史
  const addDiseaseHisData = state.diseaseHisTabData.filter(
    (item) => item.hasOwnProperty('isAdd') && !item.isAdd
  )
  addDiseaseHisData.forEach((element) => {
    delete element['isAdd']
  })
  // 用药
  const addDrugData = state.drugJsonData.filter(
    (item) => item.hasOwnProperty('isAdd') && !item.isAdd
  )
  addDrugData.forEach((element) => {
    delete element['isAdd']
  })

  state.diseaseHisTabData = [...initDataDisease, ...addDiseaseHisData]
  state.drugJsonData = [...initDataDrug, ...addDrugData]

  let diagnosisJson = []

  const initDiagnosisJson = JSON.parse(state.healdInfoData.diagnosisJson)

  state.diagnosisJsonData.forEach((item, index) => {
    diagnosisJson.push({
      diagCode: initDiagnosisJson.filter((ele) => ele.diagName == item).length
        ? initDiagnosisJson.filter((ele) => ele.diagName == item)[0].diagCode
        : new Date().getTime() + index,
      diagName: item
    })
  })

  state.healdInfoData.diagnosisJson = JSON.stringify(diagnosisJson)
  // state.healdInfoData.diagnosisJson = JSON.stringify(diagnosisJson)
  state.healdInfoData.diseaseHistory = JSON.stringify(state.diseaseHisTabData)
  state.healdInfoData.drugJson = JSON.stringify(state.drugJsonData)
  state.healdInfoData.examJson = JSON.stringify(state.examTableData)

  const data = {
    oldPatientInfo: state.oldPatientInfo,
    newPatientInfo: state.healdInfoData
  }

  updateHealthInfo(data)
    .then((res) => {
      message.success('校正成功')
      init(patId.value, tabName.value, state.listId)
    })
    .catch(() => {})
}

const detailData = (data) => {
  detialOpen.value = true
  detailOpenData.value = data
  // Modal.confirm({
  //   title: '数据详情',
  //   content: data,
  //   cancelText: '取消',
  //   onOk() {

  //   },
  //   onCancel() {
  //     Modal.destroyAll()
  //   }
  // })
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.title-box {
  width: 100%;
  height: 32px;
  color: #1d2129;
  line-height: 32px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;

  .title-item-left {
    font-weight: 600;
    font-size: 18px;
  }

  .text-icon {
    width: 3px;
    height: 16px;
    background: #165dff;
    margin-right: 8px;
    display: inline-block;
    line-height: 32px;
  }
}

.health-info .ant-form-item {
  margin-bottom: 10px;
}

.title-item {
  width: 100%;
  height: 32px;
  color: #1d2129;
  line-height: 32px;
  font-weight: 600;
  margin: 24px 0 12px;
  padding-left: 16px;
  font-size: 16px;
  background: #f7f8fa;
}
</style>
